<template>
	<view>
		<urSearch @clearSearch="clearSearch" @search="search"></urSearch>
		<view class="commodity_box">
			<urCard v-for="(item,index) in clientList" :key="index" @clickEvent="getDetails(item,index)">

				<view class="client_info">
					<u-avatar :src="item.header" size="110rpx" />
					<view class="clientInfo">
						<view class="">
							<text>{{ $t('common.Name') }}</text>
							<text class="marginForty">{{item.name}}</text>
							<u-image class="marginLeft" :src="item.newSex" width="20rpx" height="20rpx" />
						</view>
						<view class="" @click.stop="callPhone(item)" v-if="item.phone">
							<text>{{ $t('clientele.Phone') }}</text>
							<text class="marginLeft">{{item.phone}}</text>
							<uni-icons type="phone-filled" size="20" color="#3C9CFF" />
						</view>
						<view class="">
							<text>{{ $t('clientele.Email') }}</text>
							<text class="marginForty">{{item.email}}</text>
						</view>
						<view class="">
							<text>{{ $t('clientele.State') }}</text>
							<text class="marginForty"
								:style="{color:item.newStatus.statusColor}">{{item.newStatus.writing}}</text>
						</view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<button class="public_btn alter_btn" @click.stop="hypothesis(item)"
						:type="item.newStatus.typeBtn">{{item.newStatus.describe}}</button>
					<button class="public_btn " type="warn" shape="square" plain
						@click.stop="handleGrade(item)">{{ $t('clientele.Revise') }}</button>
					<button class="public_btn " type="warn" shape="square" plain
						@click.stop="handleMarket(item)">{{ $t('clientele.Replacement') }}</button>
				</view>
			</urCard>
		</view>
		<ur-movable @emitMovable="issueCondition"></ur-movable>

		<!-- 修改等级 -->
		<uni-popup ref="popup">
			<uni-popup-dialog :title="'是否修改'+publicFrom.name+'等级'" :before-close="true" @close="close"
				@confirm="confirm">
				<uni-forms ref="gradeFrom" :modelValue="gradeFrom" :rules="gradeRules">
					<uni-forms-item name="risk_level_id" required>
						<uni-data-select placeholder="请选择等级" v-model="gradeFrom.risk_level_id" :localdata="gradeList"
							:clear="false" style="width: 400rpx;" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 更换销售 -->
		<uni-popup ref="Market">
			<uni-popup-dialog :title="'是否更换'+publicFrom.name+'销售'" :before-close="true" @close="close"
				@confirm="marketConfirm">
				<uni-forms ref="gradeFrom" :modelValue="gradeFrom" :rules="gradeRules">
					<uni-forms-item name="sale_id" required>
						<uni-data-select placeholder="请选择销售" v-model="gradeFrom.sale_id" :localdata="relevancyList"
							:clear="false" style="width: 400rpx;" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		rank,
		rankOne,
		rankTwo,
		rankThree,
		man,
		woman
	} from '@/common/config/userFileImg.js'
	import {
		callPhone
	} from '@/common/config/callPhone.js'
	import {
		memberlist,
		accountlist,
		levelist,
		amendState,
		amendGrade,
		amendMarket
	} from '@/api/client.js'
	import urCard from "@/components/urcard.vue"
	import urSearch from "@/components/search.vue"
	import urMovable from "@/common/urmovable.vue"

	export default {
		components: {
			urMovable,
			urSearch,
			urCard
		},
		data() {
			return {
				rank: rank,
				rankOne: rankOne,
				isHasNextPages: 0,
				clientFrom: {
					page: 1,
					perPage: 10,
					name: ''
				},
				gradeFrom: {
					risk_level_id: '', //等级
					sale_id: '' //销售
				}, //修改等级
				gradeRules: {
					risk_level_id: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},
					sale_id: {
						rules: [{
							required: true,
							errorMessage: '请选择',
						}]
					},
				},
				//修改等级必填
				clientList: [],

				relevancyList: [], //关联销售列表
				gradeList: [], //风控等级列表
				publicFrom: {} //公共的对象赋值
			}
		},
		onPullDownRefresh() {
			this.clientFrom.page = 1
			this.clientList = []
			this.getClientList()
		},
		onReachBottom() {
			if (this.isHasNextPages) {
				this.clientFrom.page += 1
				this.getClientList(true)
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.$t('common.CustomerManagement')
			})
			this.getClientList()
			this.gatherList()
		},
		methods: {
			getClientList(a) {
				memberlist(this.clientFrom).then(res => {
					this.isHasNextPages = res.has_more
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								newSex: code.gender === '1' ? man : woman,
								newStatus: this.newStatus(code)
							}
						})
					}
					if (a) {
						this.clientList = [...this.clientList, ...res.data]
						return
					}
					this.clientList = res.data
				})
			},
			newStatus(code) {
				let writing = ''
				let statusColor = ''
				let typeBtn = ''
				let describe = ''
				let newStatus = null
				let isContent = ''
				if (code.status) {
					writing = this.$t('clientele.TurnedOn')
					statusColor = '#04be02'
					typeBtn = 'warn'
					describe = this.$t('clientele.ShutDown')
					newStatus = 0
					isContent = '是否关闭此用户，关闭后用户无法登录！'
				} else {
					writing =this.$t('clientele.Closed')
					statusColor = 'red'
					typeBtn = 'primary'
					describe = this.$t('clientele.Open')
					newStatus = 1
					isContent = '是否启用此用户！'
				}
				return {
					writing,
					statusColor,
					typeBtn,
					describe,
					newStatus,
					isContent
				}
			},
			getDetails(item, index) {
				uni.navigateTo({
					url: '/pages/subpackage/clientele/addClient?id=' + item.id
				})
			},
			search(value) {
				this.clientFrom.name = value
				this.getClientList()
			},
			clearSearch() {
				this.clientFrom.name = ''
				this.getClientList()
			},
			callPhone(item) {
				callPhone(item.phone, res => {}, fail => {})
			},
			// 创建
			issueCondition() {
				uni.navigateTo({
					url: '/pages/subpackage/clientele/addClient'
				})
			},
			hypothesis(item) {
				console.log(item);
				let _this = this
				uni.showModal({
					title: '提示',
					content: item.newStatus.isContent,
					success: function(res) {
						if (res.confirm) {
							amendState(item.id, item.newStatus.newStatus).then(res => {
								_this.showToast('操作成功')
								_this.getClientList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// this.$refs.popup.open()
			},
			// 修改等级
			handleGrade(item) {
				this.publicFrom = item
				this.gradeFrom.risk_level_id = item.risk_level_id
				this.$refs.popup.open()
			},
			// 更换销售
			handleMarket(item) {
				this.publicFrom = item
				this.gradeFrom.sale_id = item.sale_id
				this.$refs.Market.open()
			},
			close() {
				this.$refs.popup.close()
				this.$refs.Market.close()
				this.gradeFrom = {}
				this.publicFrom = {}
			},
			// 修改等级
			confirm() {
				this.$refs.gradeFrom.validate().then(res => {
					amendGrade(this.publicFrom.id, this.gradeFrom.risk_level_id).then(res => {
						this.showToast('修改成功')
						this.close()
						this.getClientList()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			// 更换销售
			marketConfirm() {
				this.$refs.gradeFrom.validate().then(res => {
					amendMarket(this.publicFrom.sale_id, this.gradeFrom.sale_id).then(res => {
						this.showToast('修改成功')
						this.close()
						this.getClientList()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gatherList() {
				// 关联销售列表
				accountlist().then(res => {
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.relevancyList = res.data
				})
				// 风控等级列表
				levelist().then(res => {
					if (res.length) {
						res = res.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.gradeList = res
				})
			},
			showToast(title) {
				uni.showToast({
					title: title,
					duration: 2000,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commodity_box {
		margin: auto;
		margin-top: 36rpx;
		padding: 0 20rpx;
		padding-bottom: 40rpx;
	}

	.rank_box {
		margin-left: auto;
		padding-top: 20rpx;
	}

	.rankimage {
		width: 100rpx;
		height: 40rpx;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
		line-height: 50rpx;
		color: #fff;
	}

	.client_info {
		// background-color: aqua;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.clientInfo {
		width: calc(100% - 130rpx);

		>view {
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			// background-color: hotpink;
		}
	}

	.marginLeft {
		margin-left: 16rpx;
	}

	.marginForty {
		margin-left: 40rpx;
	}

	.alter_btn {
		width: 145rpx;
	}

	.public_btn {
		width: 155rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.big_btn {
		width: 155rpx;
	}
</style>